import { useEffect } from "react";
import { Table, Tooltip, Radio } from "antd";
import { Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { format } from "timeago.js";

import useApplication from "../../hooks/organization/useApplication";

const { Column } = Table;

const ApplicationDetailVersions = ({ application }) => {
    const { clients, loadApplicationClients } = useApplication();
    const { dataLoading, versions, loadApplicationClientVersons } = useApplication();

    const state = useReactive({
        loading: false,
        versions: [],
        selectedType: "",
        page: 1,
        pageSize: 5,
        submitLoading: false,
    });

    const loadApplicationTypeVersons = async (apvType) => {
        loadApplicationClientVersons({ appUuid: application?.appUuid, apvType });
    };

    useEffect(() => {
        if (application?.appUuid) {
            loadApplicationClients(application.appUuid);
            loadApplicationTypeVersons();
        }
    }, [application]);

    useEffect(() => {
        state.selectedType && loadApplicationTypeVersons(state.selectedType);
    }, [state.selectedType]);

    const TableHeader = () => {
        let radios = "";
        if (clients.length > 1) {
            radios = (
                <Radio.Group value={state.selectedType} onChange={(e) => (state.selectedType = e.target.value)}>
                    <Radio.Button value="">全部</Radio.Button>
                    {clients.map((item, index) => (
                        <Radio.Button key={index} value={item.appType}>
                            {item.appType}
                        </Radio.Button>
                    ))}
                </Radio.Group>
            );
        }
        return (
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ lineHeight: "32px" }}>应用终端版本信息</div>
                <div>{radios}</div>
                <div>
                    <Button icon={<IconRefresh />} onClick={loadApplicationTypeVersons}></Button>
                </div>
            </div>
        );
    };

    return (
        <Table loading={dataLoading} title={TableHeader} dataSource={versions} rowKey="apvPubtime" bordered size="small" pagination={false} scroll={{ y: 300 }}>
            <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1 + (state.page - 1) * state.pageSize} />
            <Column title="类型" dataIndex="apvType" align="center" />
            <Column title="版本日期" dataIndex="apvVeda" align="center" />
            <Column title="版本序号" dataIndex="apvVeno" align="center" />
            <Column title="发版人" dataIndex="apvPublisher" align="center" render={(_) => _.name} />
            <Column
                title="发版时间"
                dataIndex="apvPubtime"
                align="center"
                render={(_) => _ && <Tooltip title={formatUTCTime(_, "YYYY年MM月DD日 HH:ss:mm")}>{format(formatUTCTime(_), "zh_CN")}</Tooltip>}
            />
            <Column title="版本号" dataIndex="apvVersion" align="center" />
            <Column title="代码大小" dataIndex="apvCodesize" align="center" render={(_) => (_ ? helper.byteConvert(parseInt(_)) : "")} />
            <Column title="上线状态" dataIndex="apvOnlined" align="center" render={(_) => (_ ? "已上线" : "-")} />
            <Column
                title="上线时间"
                dataIndex="apvOlti"
                align="center"
                render={(_) => _ && <Tooltip title={formatUTCTime(_, "YYYY年MM月DD日 HH:ss:mm")}>{format(formatUTCTime(_), "zh_CN")}</Tooltip>}
            />
            <Column
                title="更新说明"
                dataIndex="apvDesc"
                align="center"
                render={(_, r) =>
                    _ ? (
                        <Tooltip title={_}>
                            <IconEyeOpened />
                        </Tooltip>
                    ) : (
                        ""
                    )
                }
            />
        </Table>
    );
};

export default ApplicationDetailVersions;
